import app from 'flarum/forum/app';
import Component from 'flarum/common/Component';
import { ComponentAttrs } from 'flarum/common/Component';
import { Vnode, Children } from 'mithril';
import listItems from 'flarum/common/helpers/listItems';
import ItemList from 'flarum/common/utils/ItemList';
import MobileTabItem from './MobileTabItem';
import LinkButton from 'flarum/common/components/LinkButton';
import Button from 'flarum/common/components/Button';
import LogInModal from 'flarum/forum/components/LogInModal';
import DiscussionComposer from 'flarum/components/DiscussionComposer';
import MobileTabSessionDropdown from './MobileTabSessionDropdown';

export default class MobileTab extends Component {
  view(vnode: Vnode<ComponentAttrs, this>): Children {
    return (
      <nav className="MobileTab">
        <ul className="MobileTab-items">{listItems(this.items().toArray())}</ul>
      </nav>
    );
  }

  items(): ItemList<Children> {
    const items = new ItemList<Children>();

    items.add('home', <MobileTabItem route="/" icon="fas fa-home" label='首页' />, 100);

    if ('askvortsov-categories' in flarum.extensions) {
      items.add(
        'tags',
        <MobileTabItem route={app.route('categories')} icon="fas fa-tags" label={app.translator.trans('flarum-tags.forum.index.tags_link')} />,
        90
      );
    }
    if (app.session.user) {
      const canStartDiscussion = app.forum.attribute('canStartDiscussion') || !app.session.user;

      if (canStartDiscussion) {
        items.add(
          'add',
          Button.component({
            icon: 'fas fa-edit',
            className: 'Button Button--link',
            itemClassName: '',
            onclick: () => {
              return new Promise((resolve, reject) => {
                if (app.session.user) {
                  app.composer.load(DiscussionComposer, { user: app.session.user });
                  app.composer.show();
                  return resolve(app.composer);
                } else {
                  app.modal.show(LogInModal);
                  return reject();
                }
              });
            },
            disabled: !canStartDiscussion,
          },
            app.translator.trans(canStartDiscussion ? 'core.forum.index.start_discussion_button' : 'core.forum.index.cannot_start_discussion_button')
          ),
          80
        );
      }
    }

    if (app.session.user) {
      const unread = app.session.user.unreadNotificationCount();
      // The default Flarum component opens as a dropdown on mobile if the drawer is not open
      items.add(
        'notifications',
        <LinkButton
          href={app.route('notifications')}
          icon="fas fa-bell"
          title={app.translator.trans('core.forum.notifications.title')}
          className="Dropdown NotificationsDropdown"
        >
          {unread ? <span className="NotificationsDropdown-unread">{unread}</span> : ''}
          {app.translator.trans('core.forum.notifications.title')}
        </LinkButton>,
        80
      );

      items.add('session', <MobileTabSessionDropdown />, 70);
    } else {
      items.add(
        'logIn',
        <Button icon="fas fa-user" className="Button Button--link" onclick={() => app.modal.show(LogInModal, {})}>
          {app.translator.trans('core.forum.header.log_in_link')}
        </Button>,
        70
      );
    }

    return items;
  }
}
